<template>
  <div class="app">

		<hr class="two" />
		<h2>==== ComponentEvent 父组件给子组件 传递 自定义事件 ===</h2>
    <hr class="one" />

    <h1>{{ msg }}，学生姓名是:{{ studentName }}</h1>

    <!-- 通过父组件给子组件传递 函数类型 的 props实现（子组件需要接受）：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on），通过事件回调 使用 -->
    <!--
     要在 Student 定义事件 atguigu
   -->
    <Student @atguigu="getStudentName" @demo="m1" />


    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref 与 mounted ） -->

    <!--
          1. 被用来给元素或子组件注册引用信息（id的替代者）
          2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
      -->
    <Student ref="student" />
    <Student ref="student" @click.native="show" /><!--   使用原生事件 -->

  </div>
</template>

<script>
import Student from './Student'
import School from './School'

export default {
  name: 'ComponentEvent',
  components: {School, Student},
  data() {
    return {
      msg: 'ComponentEvent 你好啊！',
      studentName: ''
    }
  },
  methods: {
    getSchoolName(name) {
      console.log('ComponentEvent App收到了学校名：', name)
    },
    getStudentName(name, ...params) {
      console.log('ComponentEvent App atguigu 收到了学生名：', name, params)
      this.studentName = name
    },
    m1() {
      console.log('ComponentEvent demo事件被触发了！')
    },
    show() {
      alert(123)
    }
  },
  mounted() {
    // this.$refs.student 组件的实例对象
    this.$refs.student.$on('atguigu', this.getStudentName) //绑定自定义事件

    this.$refs.student.$on('atguigu2', function (name, ...params) {
      console.log('ComponentEvent App atguigu2 收到了学生名', name, params);
      console.log(this);// student 实例对象
    })
    /*
    * 箭头函数没有自己的 this
    * */
    this.$refs.student.$on('atguigu', (name, ...params) => {
      console.log('ComponentEvent App-atguigu 收到了学生名', name, params);
      console.log(this);//  ComponentEvent Vue实例对象
    }) //绑定自定义事件


    // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
    // <Student @atguigu.once="getStudentName" @demo="m1" /> //同样效果

  },
}
</script>

<style scoped>
.app {
  background-color: rgba(221, 221, 221, 0.51);
  padding: 5px;
  margin-bottom: 20px;
}
</style>
